<template>
    <div class="moviesType">类型：
        <template v-for="item in arr" :key="item._id">
            <div v-if="item._id == chooseType" class="movieSpan active">
                {{ item.name }}
            </div>
            <div v-else @click="chooseType = item._id" class="movieSpan ">
                {{ item.name }}
            </div>
            <!-- <div @click="chooseType = item._id" :class="(item._id == chooseType) ? 'movieSpan active' : 'movieSpan'">
                {{ item.name }}
            </div> -->
        </template>
    </div>
    <div v-for="item in needRender" :key="item._id">
        <span >{{ item.name }}</span>
    </div>
</template>

<script setup>
import { computed, ref } from 'vue';
const arr = ref([
    {
        "_id": "",
        "name": "全部"
    },
    {
        "_id": "66383656659a454f4604aed3",
        "name": "喜剧"
    },
    {
        "_id": "66383669659a454f4604aed4",
        "name": "爱情"
    },
    {
        "_id": "6638366f659a454f4604aed5",
        "name": "动作"
    },
    {
        "_id": "66383673659a454f4604aed6",
        "name": "科幻"
    },
    {
        "_id": "6638367b659a454f4604aed7",
        "name": "动画"
    },
    {
        "_id": "66383681659a454f4604aed8",
        "name": "悬疑"
    },
    {
        "_id": "66383689659a454f4604aed9",
        "name": "犯罪"
    },
    {
        "_id": "6638368c659a454f4604aeda",
        "name": "惊悚"
    },
    {
        "_id": "66383692659a454f4604aedb",
        "name": "冒险"
    },
    {
        "_id": "66383696659a454f4604aedc",
        "name": "音乐"
    },
    {
        "_id": "6638369a659a454f4604aedd",
        "name": "历史"
    },
    {
        "_id": "6638369e659a454f4604aede",
        "name": "奇幻"
    },
    {
        "_id": "663836a1659a454f4604aedf",
        "name": "恐怖"
    },
    {
        "_id": "663836a8659a454f4604aee0",
        "name": "战争"
    },
    {
        "_id": "663836b0659a454f4604aee1",
        "name": "传记"
    },
    {
        "_id": "663836b4659a454f4604aee2",
        "name": "歌舞"
    },
    {
        "_id": "663836b9659a454f4604aee3",
        "name": "武侠"
    },
    {
        "_id": "663836c2659a454f4604aee4",
        "name": "灾难"
    },
    {
        "_id": "663836cb659a454f4604aee5",
        "name": "纪录片"
    },
    {
        "_id": "682f32c447bd398e5f05fd14",
        "name": "剧情"
    },
    {
        "_id": "682fe58247bd398e5f05fd20",
        "name": "家庭"
    }
]);
const chooseType = ref('')
const moviesInfo = ref([
    {
        "_id": "682d9da7573f2ec0eb01fb5b",
        "name": "攻壳机动队",
        "ename": "攻殻機動隊",
        "score": "9.1",
        "release": [
            "2025-05-10(中国大陆)",
            "1995-11-18(日本)"
        ],
        "language": "日语",
        "duration": "83",
        "synopsis": "　　公元2029年，未来世界是高科技与信息化的世界。人类生活水平的提高伴随着犯罪活动的高科技化，于是，专门镇压高科技犯罪的特殊部队——公安9课成立了。队长草薙素子，作为一位全身“义体化”的女警，带领公安9课不断展开行动。\n　　是次，公安9课帮助公安6课秘密解决了一位程序员外逃他国的麻烦琐事，又卷入传说中的黑客“傀儡师”的犯罪事件。当行动陷入僵局之际，傀儡师竟然不请自来，出现在公安9课！素子与她的战友们，不知不觉地被卷入了一场涉及政府的阴谋之中。",
        "hot": 1,
        "coming": 0,
        "typeIds": [
            {
                "_id": "6638366f659a454f4604aed5",
                "name": "动作"
            },
            {
                "_id": "66383673659a454f4604aed6",
                "name": "科幻"
            },
            {
                "_id": "6638367b659a454f4604aed7",
                "name": "动画"
            }
        ],
        "regionIds": [
            {
                "_id": "682d9d6efa09000092007cb4",
                "name": "日本",
                "sort": 5
            }
        ],
        "year": "1995",
        "cover_image": "https://woniumd.oss-cn-hangzhou.aliyuncs.com/web/jianglan/202505211735247.png",
        "classic": 0,
        "actors": [
            "押井守",
            "田中敦子",
            "大塚明夫",
            "山寺宏一",
            "大木民夫"
        ]
    },
    {
        "_id": "682db983fa09000092007cbb",
        "name": "出走的决心",
        "ename": " Like A Rolling Stone",
        "score": "9.1",
        "release": [
            "2024-09-15(中国大陆)"
        ],
        "language": "汉语普通话 / 河南方言 / 四川方言",
        "duration": "106",
        "synopsis": "　　影片根据50岁阿姨自驾游真人故事改编。\n　　天真浪漫的李红（咏梅 饰）一生有过许多梦想，18岁时憧憬大学，25岁时憧憬爱情，45岁时憧憬远游……但为了那些“对别人来说更重要”的事，她只能一等再等，也一再错过。50岁，她决心不再等待，活出不一样的人生！",
        "hot": 1,
        "coming": 0,
        "typeIds": [
            {
                "_id": "682f32c447bd398e5f05fd14",
                "name": "剧情"
            },
            {
                "_id": "682fe58247bd398e5f05fd20",
                "name": "家庭"
            }
        ],
        "regionIds": [
            {
                "_id": "682d9655fa09000092007cb3",
                "name": "中国大陆",
                "sort": 1
            }
        ],
        "year": "2024",
        "cover_image": "https://woniumd.oss-cn-hangzhou.aliyuncs.com/web/jianglan/202505231103114.png",
        "classic": 0,
        "actors": [
            "尹丽川",
            "咏梅"
        ]
    },
    {
        "_id": "682da14ba9d2e7026f9c3016",
        "name": "幽灵公主",
        "ename": "もののけ姫",
        "score": "8.9",
        "release": [
            "2025-05-01(中国大陆)",
            "1997-07-12(日本)"
        ],
        "language": "日语",
        "duration": "134",
        "synopsis": "　　少年阿席达卡为解开诅咒之谜，意外卷入一场人类与森林的战争漩涡。由白狼养大的幽灵公主小桑，挥舞利刃守护森林圣地；而炼铁场的首领黑帽，为百姓生存不断掠夺森林，正策划着一场“弑神行动”......随着森林山兽神的现身，各方势力蠢蠢欲动，在这场跨越种族的生死博弈中，一个关于人类命运的终极秘密，即将揭晓……",
        "hot": 0,
        "coming": 1,
        "typeIds": [
            {
                "_id": "6638367b659a454f4604aed7",
                "name": "动画"
            },
            {
                "_id": "6638369e659a454f4604aede",
                "name": "奇幻"
            },
            {
                "_id": "66383692659a454f4604aedb",
                "name": "冒险"
            }
        ],
        "regionIds": [
            {
                "_id": "682d9d6efa09000092007cb4",
                "name": "日本",
                "sort": 5
            }
        ],
        "year": "1997",
        "cover_image": "https://woniumd.oss-cn-hangzhou.aliyuncs.com/web/jianglan/202505211747723.png",
        "classic": 0,
        "actors": []
    },
    {
        "_id": "68301d6ee39f288df640ef98",
        "name": "好东西",
        "ename": "Her Story",
        "score": "8.9",
        "release": [
            "2024-11-22(中国大陆)",
            "2024-11-13(金鸡国产电影展)",
            "2024-11-16(大规模点映)"
        ],
        "regionIds": [
            {
                "_id": "682d9655fa09000092007cb3",
                "name": "中国大陆",
                "sort": 1
            }
        ],
        "language": "汉语普通话",
        "duration": "123",
        "synopsis": "　　爱逞强的单亲妈妈王铁梅（宋佳 饰）带小孩王茉莉（曾慕梅 饰）搬到新家，结识了所谓清醒恋爱脑的邻居小叶（钟楚曦 饰）。两位性格迥异的女性，一个坚强，一个柔软，一个擅长给人当妈，一个擅长随时撒谎。面对旧创伤和新挑战，她们彼此温暖互相慰藉。\n　　而围绕王铁梅的两个男人，前夫（赵又廷 饰）不时“添乱”，女儿的鼓手老师（章宇 饰）似乎充满新的可能。作为已经觉醒的女人们和学习过性别议题的男人们，会遇到什么新问题？会如何看待自己和世界？\n",
        "hot": 0,
        "coming": 0,
        "typeIds": [
            {
                "_id": "66383669659a454f4604aed4",
                "name": "爱情"
            },
            {
                "_id": "682f32c447bd398e5f05fd14",
                "name": "剧情"
            }
        ],
        "cover_image": "https://woniumd.oss-cn-hangzhou.aliyuncs.com/web/jianglan/202505231502304.png",
        "year": "2024",
        "classic": 0,
        "actors": []
    },
    {
        "_id": "682da1d6a9d2e7026f9c301e",
        "name": "情书",
        "ename": "Love Letter",
        "score": "8.9",
        "release": [
            "1999-03(中国大陆)",
            "2021-05-20(中国大陆重映)",
            "2025-05-20(中国大陆重映)",
            "1995-03-25(日本)"
        ],
        "language": "日语",
        "duration": "117",
        "synopsis": "日本神户某个飘雪的冬日，渡边博子（中山美穗）在前未婚夫藤井树的两周年祭日上又一次悲痛到不能自已。正因为无法抑制住对已逝恋人的思念，渡边博子在其中学同学录里发现“藤井树” 在小樽市读书时的地址时，依循着寄发了一封本以为是发往天国的情书。\n　　不想不久渡边博子竟然收到署名为“藤井树（酒井美纪）”的回信，经过进一步了解，她知晓此藤井树是一个同她年纪相仿的女孩，且还是男友藤井树（柏原崇）少年时代的同班同学。为了多了解一些昔日恋人在中学时代的情况，渡边博子开始与女性藤井树书信往来。而藤井树在不断的回忆中，渐渐发现少年时代与她同名同姓的那个藤井树曾对自己藏了一腔柔情。",
        "hot": 1,
        "coming": 0,
        "typeIds": [
            {
                "_id": "66383669659a454f4604aed4",
                "name": "爱情"
            }
        ],
        "regionIds": [
            {
                "_id": "682d9d6efa09000092007cb4",
                "name": "日本",
                "sort": 5
            }
        ],
        "year": "1995",
        "cover_image": "https://woniumd.oss-cn-hangzhou.aliyuncs.com/web/jianglan/202505211750187.png",
        "classic": 1,
        "actors": []
    },
    {
        "_id": "682ef557fa09000092007cbd",
        "name": "蓦然回首",
        "ename": "ルックバック",
        "score": "8.9",
        "release": [
            "2024-10-26(中国大陆)",
            "2024-06-10(安纳西国际动画电影节)",
            "2024-06-14(上海国际电影节)",
            "2024-06-28(日本)"
        ],
        "language": "日语",
        "duration": "75",
        "synopsis": "　　这是一个令人怦然心碎的感人至深的有关于青春、梦想和友谊的故事。自信的小学生藤野一直以来都在校报上连载四格漫画，也因此享受着同学们的追捧赞美，直到她意外得知一个“家里蹲”不上学的同学京本，也想要尝试在校报上刊登漫画。这两个截然不同的女孩，她们之间唯一的联系就是对漫画的热爱。然而，有一天，在她们之间发生了一些事情，让一切都改变了……",
        "hot": 1,
        "coming": 0,
        "typeIds": [
            {
                "_id": "682f32c447bd398e5f05fd14",
                "name": "剧情"
            },
            {
                "_id": "6638367b659a454f4604aed7",
                "name": "动画"
            }
        ],
        "regionIds": [
            {
                "_id": "682d9d6efa09000092007cb4",
                "name": "日本",
                "sort": 5
            }
        ],
        "year": "2024",
        "cover_image": "https://woniumd.oss-cn-hangzhou.aliyuncs.com/web/jianglan/202505231028115.png",
        "classic": 0,
        "actors": []
    },
    {
        "_id": "682da05fa9d2e7026f9c2ffd",
        "name": "我仍在此",
        "ename": "Ainda estou aqui",
        "score": "7.8",
        "release": [
            "2025-05-16(中国大陆)",
            "2024-09-01(威尼斯电影节)",
            "2024-09-26(平遥国际电影展)"
        ],
        "language": "葡萄牙语",
        "duration": "138",
        "synopsis": "　　尤妮斯·派瓦（费尔南达·托里斯 饰）原本拥有一个温馨的家庭，不料丈夫鲁本斯因政治立场被秘密逮捕。尤妮斯在寻找丈夫的过程中，遭遇监禁与酷刑，却始终拒绝屈服。她以柔弱的肩膀扛起养育子女的重担，甚至自学法律，只为揭开丈夫遇害的真相。自此开启长达半个世纪的抗争，从绝望主妇蜕变为人权律师。当丈夫迟到的死亡证明终于交到她手中时，她含泪的微笑既是对历史的控诉，也是对生命的释然！\n　　影片根据马塞洛·鲁本斯·派瓦撰写的同名回忆录改编。",
        "hot": 0,
        "coming": 1,
        "typeIds": [
            {
                "_id": "6638369a659a454f4604aedd",
                "name": "历史"
            },
            {
                "_id": "663836b0659a454f4604aee1",
                "name": "传记"
            }
        ],
        "regionIds": [
            {
                "_id": "682da00efa09000092007cb5",
                "name": "法国",
                "sort": 6
            },
            {
                "_id": "682da014fa09000092007cb6",
                "name": "巴西",
                "sort": 7
            }
        ],
        "year": "2024",
        "cover_image": "https://woniumd.oss-cn-hangzhou.aliyuncs.com/web/jianglan/202505211743299.png",
        "classic": 0,
        "actors": []
    },
    {
        "_id": "682ef55afa09000092007cbe",
        "name": "诡才之道",
        "ename": "Dead Talents Society",
        "score": "7.7",
        "release": [
            "2025-02-22(中国大陆)",
            "2024-08-07(中国台湾)",
            "2024-08-15(中国香港)",
            "2024-06-28(台北电影节)"
        ],
        "language": "汉语普通话",
        "duration": "112",
        "synopsis": "　　所有人都只关心闹鬼吓不吓人，却没人关心鬼闹得累不累。在著名闹鬼圣地“旺来温泉大饭店”414号房里，过气女鬼天后「凯萨琳」（张榕容 饰）和三流阴间经纪人「Makoto」（陈柏霖 饰）正在为培养菜鸟新鬼「同学」（王净 饰）发愁。做人难，做鬼也不易，要脱「鬼」而出、吓出「冥」堂、「鬼」尽皆知，人模「鬼」样的三位必须携手合作，吓出风格、吓出水平，打造新的都市传说！",
        "hot": 1,
        "coming": 0,
        "typeIds": [
            {
                "_id": "66383656659a454f4604aed3",
                "name": "喜剧"
            },
            {
                "_id": "663836a1659a454f4604aedf",
                "name": "恐怖"
            }
        ],
        "regionIds": [
            {
                "_id": "682fdada47bd398e5f05fd1f",
                "name": "中国台湾",
                "sort": 3
            }
        ],
        "year": "2024",
        "cover_image": "https://woniumd.oss-cn-hangzhou.aliyuncs.com/web/jianglan/202505231016419.png",
        "classic": 0,
        "actors": [
            "徐汉强",
            "陈柏霖",
            "张榕容",
            "王净"
        ]
    },
    {
        "_id": "6830407c5b05254ad43ad998",
        "name": "终极对弈",
        "ename": "승부",
        "score": "7.3",
        "release": [
            "2025-03-26(韩国)"
        ],
        "regionIds": [
            {
                "_id": "6830403b47bd398e5f05fd42",
                "name": "韩国",
                "sort": 8
            }
        ],
        "language": "韩语",
        "duration": "116",
        "synopsis": "　　电影改编自围棋传说曹薰铉九段（李秉宪 饰）和自己传授毕生所学的弟子李昌镐九段（刘亚仁 饰）之间展开胜负对决的真实故事。",
        "hot": 0,
        "coming": 0,
        "typeIds": [
            {
                "_id": "682f32c447bd398e5f05fd14",
                "name": "剧情"
            },
            {
                "_id": "663836b0659a454f4604aee1",
                "name": "传记"
            }
        ],
        "year": "2025",
        "cover_image": "https://woniumd.oss-cn-hangzhou.aliyuncs.com/web/jianglan/202505231732202.png",
        "classic": 0,
        "actors": []
    },
    {
        "_id": "682f31885631163b8565d71f",
        "name": "大风杀",
        "ename": "Trapped",
        "score": "7.0",
        "release": [
            "2025-05-01(中国大陆)",
            "2025-04-19(北京国际电影节)"
        ],
        "regionIds": [
            {
                "_id": "682d9655fa09000092007cb3",
                "name": "中国大陆",
                "sort": 1
            }
        ],
        "language": "汉语普通话",
        "duration": "131",
        "synopsis": "　　1995年，全面禁枪政策实施的前一年，弃镇忙崖的平静被打破。藏匿巨额宝藏的悍匪大哥北山（辛柏青 饰）越狱出逃，43名穷凶极恶的匪徒从四面八方齐聚于此，随大哥北山一道用武力封锁忙崖，整座小镇陷入了断油断通信的绝境！\n　　悍匪要钱也要命，忙崖枪声四起，巨大沙暴也即将席卷而来。“夜猫子”夏然（白客 饰）和另外两位民警面临着1把枪对阵88把枪的天崩开局，匪帮内部亦上演“黑吃黑”大戏。群匪环伺，风沙蔽日，命悬一线，如何破局？",
        "hot": 1,
        "coming": 0,
        "typeIds": [
            {
                "_id": "66383681659a454f4604aed8",
                "name": "悬疑"
            },
            {
                "_id": "66383689659a454f4604aed9",
                "name": "犯罪"
            },
            {
                "_id": "682f32c447bd398e5f05fd14",
                "name": "剧情"
            }
        ],
        "year": "2025",
        "cover_image": "https://woniumd.oss-cn-hangzhou.aliyuncs.com/web/jianglan/202505222235156.png",
        "classic": 0,
        "actors": [
            "张琪",
            "白客",
            "辛柏青",
            "郎月婷"
        ]
    }
]);

const needRender = computed(() => {
    if (chooseType.value == '') {
        return moviesInfo.value;
    } else {
        return (moviesInfo.value).filter(item => item.typeIds.some(i => i._id == chooseType.value))
    }
})
</script>

<style scoped>
.moviesType {
    display: flex;
}

.movieSpan {
    padding: 2px 5px;
    margin-right: 10px;
    cursor: pointer;
    border-radius: 14px;
}

.active {
    background-color: chartreuse;
}
</style>